import { Cascader, Modal } from 'antd'
import { ImagePicker, WingBlank } from 'antd-mobile'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getConfigController } from './actionCreators'
import './css/resume.css'
import Mytab from './Mytab'
import pcdata from './pcdata'

const data = []
export class Resume extends Component {
    constructor(props) {
        super(props)
        this.state = {
            files: data,
            multiple: false,
            schoolArea: [],
            teacherGrade: [],
            teacherSubject: [],
            visible: false
        }
        this.checkboxGrades = this.checkboxGrades.bind(this)
        this.checkboxProjects = this.checkboxProjects.bind(this)
    }
    componentDidMount() {
        this.props.dispatch(getConfigController())
    }
    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    };
    change = (type, e) => {
        this.setState({
            [type]: e.target.value
        })
    }
    changeSchoolArea = (type, value) => {
        this.setState({
            [type]: value
        })
    }
    checkboxGrades(e) {
        let item = e.target.value;
        let items = this.state.teacherGrade.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ teacherGrade: items });
    }
    checkboxProjects(e) {
        let item = e.target.value;
        let items = this.state.teacherSubject.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ teacherSubject: items });
    }
    submit = () => {
        console.log('submit:', this.state);
        fetch('/teacherInfoController/saveTeacherInfo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'dataType': "json"
            },
            body: JSON.stringify({
                name: this.state.name,
                sex: this.state.sex,
                birthday: this.state.birthday,
                place: this.state.place,
                identity: this.state.identity,
                education: this.state.education,
                school: this.state.school,
                teacherSubsidy: this.state.teacherSubsidy,
                teacherTime: this.state.teacherTime,
                remark: this.state.remark,
                phone: this.state.phone,
                qqNumber: this.state.qqNumber,
                wechatNumber: this.state.wechatNumber,
                area: this.state.area,
                address: this.state.address,
                schoolArea: this.state.schoolArea.toString(),
                teacherGrade: this.state.teacherGrade.toString(),
                teacherSubject: this.state.teacherSubject.toString(),
            })

        })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                if(res.code=='200'){
                    this.setState({visible:true})
                }
            })
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    handleUpdate = () => {
        this.setState({ visible: false });
    }
    render() {
        const { files } = this.state;
        console.log(this.state);

        return (
            <div style={{ overflowInline: 'hidden' }}>
                <Modal okText='确定' cancelText='返回'
                    visible={this.state.visible}
                    onOk={this.handleUpdate} onCancel={this.handleCancel}
                >
                    简历上传成功
                </Modal>
                <div className='resume-head'>填写我的简历：</div>
                <div className='resume-write'>
                    <div className='top'>
                        <div className='left'>
                            <div className='input'>
                                <span className='must'>*</span>姓名：
                                <input type='text' name='name' onBlur={(e) => this.change("name", e)} /><br />
                            </div>
                            <div className='input'>
                                <span className='must'>*</span>性别：
                                <select onBlur={(e) => this.change("sex", e)}>
                                    {
                                        this.props.sex.map((item) => (
                                            <option value={item.id} name='sex'>{item.configName}</option>
                                        ))
                                    }
                                </select>
                            </div>
                            <div className='input'>
                                <span className='must'>*</span>生日：
                                <select onBlur={(e) => this.change("birthday", e)}>
                                    <option value="1986" name='birthday'>1986年</option>
                                    <option value="1987" name='birthday'>1987年</option>
                                    <option value="1988" name='birthday'>1988年</option>
                                    <option value="1989" name='birthday'>1989年</option>
                                    <option value="1990" name='birthday' selected>1990年</option>
                                    <option value="1991" name='birthday'>1991年</option>
                                    <option value="1992" name='birthday'>1992年</option>
                                    <option value="1993" name='birthday'>1993年</option>
                                    <option value="1994" name='birthday'>1994年</option>
                                    <option value="1995" name='birthday'>1995年</option>
                                    <option value="1996" name='birthday'>1996年</option>
                                    <option value="1997" name='birthday'>1997年</option>
                                    <option value="1998" name='birthday'>1998年</option>
                                    <option value="1999" name='birthday'>1999年</option>
                                    <option value="2000" name='birthday'>2000年</option>
                                    <option value="2001" name='birthday'>2001年</option>
                                </select>
                            </div>
                            <div className='input'>
                                <span className='must'>*</span>籍贯：
                                <input type='text' name='native' onBlur={(e) => this.change("place", e)} /><br />
                            </div>
                        </div>
                    </div>
                    <div className='pho'>
                        <WingBlank>
                            <ImagePicker
                                length='1'
                                className='photo'
                                files={files}
                                onChange={this.onChange}
                                selectable={files.length < 1}
                                multiple={this.state.multiple}
                            />
                        </WingBlank>
                        <div className='photo-text'>上传头像(非必填)</div>
                    </div>
                    <div className='body'>
                        <div className='input'>
                            <span className='must'>*</span>身份：
                            <select onBlur={(e) => this.change("identity", e)}>
                                {
                                    this.props.identity.map((item) => (
                                        <option value={item.id} name='identity'>{item.configName}</option>
                                    ))
                                }
                            </select>
                        </div>
                        <div className='input'>
                            <span className='must'>*</span>学历：
                            <select onBlur={(e) => this.change("education", e)}>
                                {
                                    this.props.education.map((item) => (
                                        <option value={item.id} name='education'>{item.configName}</option>
                                    ))
                                }
                            </select>
                        </div>
                        <div className='input'>
                            <span className='must'>*</span>院校：
                            <input type='text' name='school' onBlur={(e) => this.change("school", e)} />
                        </div><br />
                        <div className='input1'>
                            <span className='must'>*</span>学校所在城市：
                            <span className='resume-area'>
                                <Cascader
                                    bordered={false}
                                    options={pcdata}
                                    onChange={(value) => { this.changeSchoolArea('schoolArea', value) }}
                                    placeholder="请选择位置"
                                    className='Area-area'
                                />
                            </span>
                        </div>
                    </div>
                    <div className='check'>
                        <div className='grades'>
                            <div className='can'>可教<br />年级：</div>
                            <div className='grade-list'>
                                {
                                    this.props.class.map((item) => (
                                        <div>
                                            <input 
                                                name="grade" 
                                                type="checkbox" 
                                                onChange={this.checkboxGrades} 
                                                value={item.id} 
                                            />
                                            {item.configName}
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                        <div className='subjects'>
                            <div className='can'>可教<br />科目：</div>
                            <div className='grade-list'>
                                {
                                    this.props.subject.map((item)=>(
                                        <div>
                                            <input 
                                                name="subject" 
                                                type="checkbox" 
                                                onChange={this.checkboxProjects} 
                                                value={item.id}
                                            />
                                            {item.configName}
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </div>
                    <div className='salary'>
                        薪酬:
                        <input type='text' name='salary' onBlur={(e) => this.change("teacherSubsidy", e)} />
                        <select onBlur={(e) => this.change("salary-type", e)}>
                            <option name='salary' value="hour">元/小时</option>
                        </select>
                    </div>
                    <div className='resume-time'>
                        时间:
                        <input type='text' name='time' onBlur={(e) => this.change("teacherTime", e)} />
                    </div>
                    <div className='resume-explain'>
                        <div className='explain'>简介说明</div>
                        <textarea rows="8" className='explain-content' onBlur={(e) => this.change("remark", e)}></textarea>
                    </div>
                    <div className='resume-contact'>
                        <div className='contact'>联系信息</div>
                        <div className='phone'>
                            电话：<input type='text' name='phone' onBlur={(e) => this.change("phone", e)} />
                        </div>
                        <div className='qq'>
                            QQ：<input type='text' name='qq' onBlur={(e) => this.change("qqNumber", e)} />
                        </div>
                        <div className='wx'>
                            微信：<input type='text' name='wx' onBlur={(e) => this.change("wechatNumber", e)} />
                        </div>
                        <div className='resume-area1'>
                            区域：
                            <select onBlur={(e) => this.change("area", e)}>
                                <option value="changan">长安区</option>
                                <option value="yuhua">裕华区</option>
                                <option value="xinhua">新华区</option>
                            </select>
                        </div>
                        <div className='resume-address'>
                            地址：<input type='text' onBlur={(e) => this.change("address", e)} />
                        </div>
                    </div>
                    <div className='resume-submit' onClick={this.submit}>提交</div>
                </div>
                <Mytab />
                <div className='bottom'></div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    class: state.configClass,
    sex: state.sex,
    identity: state.identity,
    education: state.education,
    subject: state.subject
})
export default connect(mapStateToProps)(Resume)
